<template>
  <div class="accountlist">
    <div class="head">
      <h3>账号列表</h3>
    </div>
    <div class="main">
      <el-table
        :data="accountlist"
        ref="multipleTable"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="checkboxChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="账号" prop="account"> </el-table-column>
        <el-table-column prop="userGroup" label="用户组"> </el-table-column>
        <el-table-column prop="ctime" label="创建时间" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="open(scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="clickRemove(obj.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="编辑信息" :visible.sync="dialog" width="30%" center>
        <div class="marks">
          <div>账号</div>
          <div><el-input v-model="change.account" /></div>
        </div>
        <div class="marks">
          <div>用户组</div>
          <div>
            <el-select v-model="change.userGroup" placeholder="请选择">
              <el-option value="超级管理员" />
              <el-option value="普通管理员" />
            </el-select>
          </div>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog = false">取 消</el-button>
          <el-button type="primary" @click="confirmChange">确 定</el-button>
        </span>
      </el-dialog>
      <div style="margin-top: 20px">
        <el-button type="danger" @click="delAll()">批量删除</el-button>
        <el-button type="primary" @click="deselectAll()">取消选择</el-button>
      </div>
      <div style="margin-top: 20px">
        <el-pagination
          background
          @size-change="sizeChange"
          @current-change="pageChange"
          :current-page.sync="currentPage"
          :page-sizes="pagearr"
          :page-size="pagecount"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { $_accountlist, $_changeacc, $_delacc, $_delAll } from "@/apis/user";
import { getChinatime } from "@/utils/utils";
export default {
  created() {
    this.reptable();
  },
  data() {
    return {
      accountlist: [],
      total: 0,
      dialog: false,
      change: [],
      currentPage: 1,
      pagecount: 5,
      pagearr: [5, 10, 15, 20],
    };
  },
  methods: {
    sizeChange(val) {
      this.pagecount = val;
      this.reptable();
    },
    pageChange(newpage) {
      this.currentPage = newpage;
      this.reptable();
    },
    reptable() {
      $_accountlist({
        currentPage: this.currentPage,
        pageSize: this.pagecount,
      }).then((res) => {
        for (let obj of res.data.data) {
          obj.ctime = getChinatime(obj.ctime);
        }
        this.accountlist = res.data.data;
        this.total = res.data.total;
      });
    },
    clickRemove(id) {
      this.$confirm("此操作将永久删除该账号, 是否继续?", "危险操作慎重选择", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        $_delacc({ id }).then((res) => {
          if (res.data.code == 0) {
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            this.reptable();
          }
        });
      });
    },
    deselectAll(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.deselectAll(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    checkboxChange(val) {
      this.multipleSelection = val;
      let arr = [];
      for (let obj of val) {
        arr.push(obj.id);
      }
      this.arrs = JSON.stringify(arr);
    },

    open(row) {
      this.dialog = true;
      this.change = row;
      console.log(row);
    },
    confirmChange() {
      $_changeacc({
        id: this.change.id,
        userGroup: this.change.userGroup,
        account: this.change.account,
      }).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            message: res.data.msg,
            type: "success",
          });
          this.reptable();
        }
      });
      this.dialog = false;
    },
    delAll() {
      this.$confirm("此操作将永久删除这些账号, 是否继续?", "危险操作慎重选择", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        $_delAll({
          ids: this.arrs,
        }).then((res) => {
          if (res.data.code == 0) {
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            this.reptable();
          }
        });
      });
    },
  },
};
</script>

<style lang='less' scoped>
.accountlist {
  width: 98%;
  height: 100%;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 0 20px #212121;
  .head {
    height: 50px;
    padding: 0 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #bdbdbd;
  }
  .main {
    padding: 20px;
    .marks {
      display: flex;
      align-items: center;

      margin-top: 20px;
    }
  }
}
</style>